<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/parent.css">
    <script src="jquery/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/parent.js"></script>
</head>
<body>

</body>
    <div class="ancestors">
        <div style="width: 500px;">div(曾祖父)
            <ul> ul (祖父)
                <li> li(直接父)
                    <span>span</span>
                </li>
            </ul>
        </div>

    <div style="width: 500px;">div(祖父)
        <p> p(直接父)
            <span>span</span>
        </p>
    </div>
    </div>
</html>